<template>
  <div id="video-player" ref="videoPlayer" class="video-player"></div>
</template>
<script setup>
import 'xgplayer/dist/index.min.css'
import playImg from '@/assets/images/comment/play-video.png'
import pauseImg from '@/assets/images/comment/pause-video.png'
import fullImg from '@/assets/images/comment/full-video.png'
import closeFullImg from '@/assets/images/comment/close-full-video.png'
import { ref, onMounted, onBeforeUnmount } from 'vue'
import Player from 'xgplayer'
const videoPlayer = ref(null)
const props = defineProps({
  url: {
    default: '',
    type: String
  },
  poster: {
    default: '',
    type: String
  }
})
const initPlayer = () => {
  videoPlayer.value = new Player({
    icons: {
      play: `<div class='video-icon'><img src="${playImg}"/></div>`,
      pause: `<div class='video-icon'><img src="${pauseImg}"/></div>`,
      exitFullscreen: `<div class='video-icon'><img src="${closeFullImg}"/></div>`,
      fullscreen: `<div class='video-icon'><img src="${fullImg}"/></div>`
    },
    url: props.url,
    poster: props.poster,
    id: 'video-player',
    height: '100%',
    width: '100%',
    cssFullscreen: false,
    playbackRate: [1.25, 1, 0.75],
    control: {
      order: ['progress', 'play', 'time', 'volume', 'speed', 'fullscreen']
    },
    volumeType: 'progress',
    volume: {
      index: 10,
      default: 0
    },
    playbackrate: {
      index: 2
    },
    fullscreen: {
      index: 1
    },
    errorTips: '视频播放出错，请重试～'
  })
}
onMounted(() => {
  initPlayer()
})

// 销毁播放器实例
onBeforeUnmount(() => {
  videoPlayer.value.destroy()
})
</script>
<style lang="less" scoped>
.video-player {
  width: 100%;
  height: 100%;
  :deep(.xgplayer-controls) {
    background: rgba(0, 0, 0, 0.4);
    border-radius: 0 0 24px 24px;
    * {
      font-size: 16px;
    }
    .video-icon {
      &:hover {
        opacity: 0.7;
      }
      img {
        width: 32px;
        height: 32px;
      }
    }

    .xg-tips {
      display: none;
    }

    .xg-pos {
      left: 0;
      right: 0;

      .xg-left-grid {
        margin-left: 24px;
      }

      .xg-right-grid {
        margin-right: 24px;
      }
    }
    .btn-text {
      .icon-text {
        background: rgba(255, 255, 255, 0.4);
        color: #fff;

        &:hover {
          background: #33caa4;
        }
      }
    }

    .xgplayer-progress-played,
    .xgplayer-drag {
      background: #33caa4;
    }

    .xgplayer-time {
      * {
        color: #fff;
      }
    }

    .xgplayer-progress-btn {
      background: unset;
      box-shadow: unset;
    }

    .xg-options-list {
      &.active {
        background: rgba(4, 11, 26, 0.75);
        border-radius: 8px;
        display: flex;
        flex-direction: column;
        gap: 8px;
        padding: 8px 16px;
        height: fit-content;
        .option-item {
          margin: 0;
          &:hover,
          &.selected {
            * {
              color: #33caa4;
            }
          }
        }
      }
    }
  }
}
</style>
